<template>
  <div class="myAccount">
    <header>
      <span class="back" @click="$router.back(-1)">
        <svg-icon icon-class="back"></svg-icon>
      </span>
      <h1>My account</h1>
      <span></span>
    </header>
    <div class="main">
      <ul class="balance">
        <li class="coins" v-text="utils.tranNumber(balance.coinSum, 1)"></li>
        <li
          class="bonus"
          v-text="utils.tranNumber(balance.archBalance, 1)"
        ></li>
      </ul>
      <!-- 支付相关 -->
      <div class="coin-recharge">
        <h2>Coin recharge</h2>
        <ul class="card-list">
          <li
            v-for="item of list"
            :key="item.rechargeId || item.vipId"
            :class="{
              dot: item.characterCorner ? true : false,
              active: item.rechargeId
                ? item.rechargeId == currentCard.rechargeId
                : item.vipId == currentCard.vipId,
            }"
            :li-content="item.characterCorner"
            @click="selectCard(item)"
          >
            <h3
              class="ellipsis"
              :title-content="item.conversionCoin ? 'COINS' : ''"
              v-text="item.conversionCoin || item.vipNameEns"
            ></h3>
            <p
              class="desc ellipsis-two"
              :add-content="item.giveCoin ? '+' : ''"
              :desc-content="item.giveCoin ? 'COINS' : ''"
              v-text="item.giveCoin || item.text"
            ></p>
            <div
              class="price"
              v-text="'$ ' + (item.rechargeSum || item.price)"
              :price-content="item.linePrice ? `$ ${item.linePrice}` : ''"
            ></div>
          </li>
        </ul>
        <pay-list :currentCard="currentCard" @recharge="recharge"></pay-list>
        <!-- 跳转反馈页 -->
        <router-link :to="{ name: 'sendFeedback' }" class="feedback"
          >Any Problems? Feedback Now ></router-link
        >
      </div>
      <div class="tips">
        <h4>Tips:</h4>
        <p>
          Reminder:Please confirm the recharge amount carefully.The Coins
          recharged are not returnable. <br />Download app to view recharge
          record.
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import PayList from "components/common/PayList/Index";
export default {
  data() {
    return {
      list: [], //coin-recharge列表
      currentCard: {}, //当前选中的recharge-card
    };
  },
  components: {
    PayList,
  },
  computed: {
    ...mapGetters(["balance", "userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.getUserBalanceAndVip();
    this.getCoinAndVipRecharge();
  },
  methods: {
    ...mapMutations({
      setBalance: "SET_BALANCE",
      setShowPopup: "SET_SHOW_POPUP",
      setCurrentPopup: "SET_CURRENT_POPUP",
    }),
    //子组件 充值完成调用
    recharge(res) {
      this.getUserBalanceAndVip();
      if (res.isFirstRecharge === 1) {
        this.getCoinAndVipRecharge();
      }
    },
    selectCard(item) {
      // console.log(item);
      this.currentCard = item;
    },
    // 获取用户余额信息
    async getUserBalanceAndVip() {
      let res = await this.$api.home.getUserBalanceAndVip({});
      if (res.code === 1) {
        this.setBalance(res.source);
      }
    },
    // 查询书币充值和连续充值套餐列表
    async getCoinAndVipRecharge() {
      let res = await this.$api.home.getCoinAndVipRecharge({});
      if (res.code === 1) {
        let arr = res.source.coinRechargesList.concat(res.source.coinVipList);
        this.list = arr.sort(this.utils.compareSort("sort"));
        this.currentCard = this.list[0];
        // console.log(this.list);
      }
    },
    loginPopup() {
      this.setCurrentPopup({ currentPopup: "login" });
      this.setShowPopup(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.myAccount {
  padding-bottom: 108px;
  header {
    padding: 45px 15px 70px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back {
      .svg-icon {
        width: 56px;
        height: 56px;
      }
    }
    > h1 {
      font-size: 34px;
      color: #333333;
    }
  }
  > .main {
    padding: 32px;
    > ul.balance {
      display: flex;
      justify-content: space-around;
      li {
        text-align: center;
        font-size: 40px;
        line-height: 40px;
        color: #333333;
        display: flex;
        flex-direction: column;
        font-weight: 600;
        &::after {
          font-size: 26px;
          line-height: 43px;
          margin-top: 8px;
          color: #999999;
          font-weight: 400;
        }
        &.coins::after {
          content: "COINS";
        }
        &.bonus::after {
          content: "Bonus";
        }
      }
    }
    > .coin-recharge {
      margin-top: 47px;
      > h2 {
      }
      > ul.card-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        > li {
          width: 328px;
          height: 210px;
          margin-top: 30px;
          font-weight: 500;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: center;
          box-sizing: border-box;
          border: 2px solid #eeeeee;
          border-radius: 16px;
          position: relative;
          h3 {
            font-weight: 500;
            padding: 0 10px;
            margin-top: 38px;
            line-height: 40px;
            font-size: 32px;
            color: #333333;
            &::after {
              content: attr(title-content);
              margin-left: 8px;
              font-size: 20px;
            }
          }
          .desc {
            padding: 0 16px;
            line-height: 28px;
            font-size: 22px;
            color: #e86472;
            &::before {
              content: attr(add-content);
            }
            &::after {
              content: attr(desc-content);
              margin-left: 6px;
            }
          }
          .price {
            width: 100%;
            height: 56px;
            line-height: 56px;
            color: #e86472;
            font-size: 34px;
            background: #eeeeee;
            border-radius: 0px 0px 14px 14px;
            &::before {
              content: attr(price-content);
              color: #999999;
              font-size: 22px;
              margin-right: 16px;
              text-decoration: line-through;
            }
          }
          &.dot::after {
            content: attr(li-content);
            width: 140px;
            height: 48px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -24px;
            right: 0;
            padding: 0 14px;
            font-size: 22px;
            color: #ffffff;
            font-weight: 500;
            background: #e86472;
            border-radius: 0px 16px 0px 16px;
          }
          &.active {
            border-color: #e86472;
            .price {
              background: #fceff0;
            }
          }
        }
      }
      > .feedback {
        display: inline-block;
        margin-top: 36px;
        line-height: 40px;
        font-size: 28px;
        color: #e86472;
      }
    }
    > .tips {
      margin-top: 24px;
      line-height: 40px;
      color: #999999;
      font-size: 28px;
    }
  }
}
</style>
